<!--
 * @Descripttion: 编辑招聘信息
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 17:32:26
-->
<template>
  <div class="lb-app-edit-recruit">
    <top-nav :isBack="true"></top-nav>
    <div class="page-main">
      <div style="height: 20px"></div>
      <el-form
        @submit.native.prevent
        :model="recruitForm"
        :rules="recruitFormRules"
        ref="recruitForm"
        label-width="120px"
      >
        <el-form-item label="招聘职位" prop="title">
          <el-input
            v-model="recruitForm.title"
            placeholder="请输入招聘职位"
          ></el-input>
        </el-form-item>
        <el-form-item label="薪资" prop="money">
          <el-input
            v-model="recruitForm.money"
            placeholder="请输入薪资"
          ></el-input>
        </el-form-item>
        <el-form-item label="经验要求" prop="experience">
          <el-input
            v-model="recruitForm.experience"
            placeholder="请输入经验要求"
          ></el-input>
        </el-form-item>
        <el-form-item label="学历要求" prop="education">
          <el-input
            v-model="recruitForm.education"
            placeholder="请输入学历要求"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="recruitForm.phone"
            placeholder="请输入电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="recruitForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item label="详细描述" prop="content">
          <lb-ueditor
            v-model="recruitForm.content"
            :destroy="true"
          ></lb-ueditor>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo('recruitForm')">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import {reg} from '@/utils/reg'
export default {
  data () {
    return {
      recruitForm: {
        title: '',
        money: '',
        experience: '',
        education: '',
        content: '',
        phone: '',
        top: 0
      },
      recruitFormRules: {
        title: {
          required: true,
          type: 'string',
          message: '请输入内容',
          trigger: 'blur'
        },
        money: {
          required: true,
          type: 'string',
          message: '请输入内容',
          trigger: 'blur'
        },
        experience: {
          required: true,
          type: 'string',
          message: '请输入内容',
          trigger: 'blur'
        },
        education: {
          required: true,
          type: 'string',
          message: '请输入内容',
          trigger: 'blur'
        }
        // content: {required: true, type: 'string', message: '请输入内容', trigger: 'blur'},
        // phone: {required: true, validator: reg.validateAllPhone, trigger: 'blur'},
        // top: {required: true, type: 'number', message: '请输入排序值', trigger: 'blur'}
      }
    }
  },
  created () {
    let { wid, id } = this.$route.query
    this.recruitForm.modular_id = wid
    this.recruitForm.id = id
    if (id) {
      this.getFormInfo()
    }
  },
  methods: {
    getFormInfo () {
      let { id } = this.recruitForm
      this.$api
        .getWebsitContentInfo({ modular_id: this.recruitForm.modular_id, id })
        .then(res => {
          if (res.code === 200) {
            for (let key in this.recruitForm) {
              this.recruitForm[key] = res.data[key]
            }
          }
        })
    },
    /**
     * @method 提交表单信息
     */
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let { recruitForm } = this
          if (this.recruitForm.id) {
            this.$api.editWebsiteContentInfo(recruitForm).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          } else {
            this.$api.addWebsiteContentInfo(recruitForm).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success(this.$t('tips.successSub'))
                this.goBack()
              }
            })
          }
        }
      })
    },

    /**
     * @method 返回上一页
     */
    goBack () {
      this.$router.go(-1)
    }
  },
  watch: {
    'recruitForm.content' (newValue, oldValue) {
      if (newValue && !oldValue) {
        this.$refs['recruitForm'].clearValidate('content')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-app-edit-recruit {
  width: 100%;
  .page-main {
    .el-input,
    .el-input-number {
      width: 300px;
    }
  }
}
</style>
